<template>
  <div>
    <div class="item">
      <div><img src="" alt="" /></div>
      <div class="list">
        <h3>热门50首</h3>
        <ul>
          <li v-for="(i,index) in songlist" :key="i.id" @click="sendId(i.id)">
            <span>{{index+1}} {{ i.name }}</span>
            <span class="time">{{getTime(i.dt)}}</span>
          </li>
          <li class="all" @click="getall" v-if="show">查看全部</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songlist: [],
      all:[],
      show:true
    };
  },
  methods:{

    getall(){
      this.songlist=this.all
      this.show=false
    },
    sendId(id){
     this.$store.state.mid=id
     this.$emit('getmusic')
    }
  },
  computed: {
    getTime() {
      return function (time) {
        let min = Math.floor(time / 60000).toString()[1]
          ? Math.floor(time / 60000).toString()
          : "0" + Math.floor(time / 60000).toString();
        let sec = Math.floor(time % 60000)
          .toString()
          .slice(0, 2);
        return min + ":" + sec;
      };
    },
  },
  mounted() {
    this.$request({
      url: "/artists",
      params: {
        id: this.$route.query.id,
      },
    }).then((success) => {
      this.all = success.data.hotSongs;
      this.songlist=this.all.slice(0,10)
    });
  },
};
</script>

<style scoped>
.item {
  display: flex;
  justify-content: space-between;
}
.item div:nth-child(1) {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
}
.list {
  width: 700px;
}
.list h3 {
  margin-bottom: 20px;
}
.list ul li {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
}
.time{
  color: gray;
}
.list ul li:nth-child(2n-1) {
  background-color: #f6f6f7;
}
.list ul li:hover {
  background-color: rgb(241, 241, 241);
}
.all{
 color: gray;
}
</style>